<template>
  <div class="ui-tooltip" ref="tooltip">
    <slot></slot>
  </div>
</template>

<script>
import Tooltip from 'tether-tooltip'

export default {
  name: 'ui-tooltip',

  props: {
    trigger: {
      type: String,
      required: true
    },
    position: {
      type: String,
      default: 'bottom center'
    },
    openOn: {
      type: String,
      default: 'hover focus'
    },
    openDelay: {
      type: Number,
      default: 0
    }
  },

  data () {
    return {
      tooltip: null
    }
  },

  watch: {
    trigger () {
      if (this.tooltip === null) {
        this.initialize()
      }
    }
  },

  mounted () {
    if (this.tooltip === null) {
      this.initialize()
    }
  },

  beforeDestroy () {
    if (this.tooltip !== null) {
      this.tooltip.destroy()
    }
  },

  methods: {
    initialize () {
      if (this.trigger !== undefined) {
        this.tooltip = new Tooltip({
          target: this.$parent.$refs[this.trigger],
          content: this.$refs.tooltip,
          classes: 'ui-tooltip--theme-default',
          position: this.position,
          openOn: this.openOn,
          openDelay: this.openDelay
        })
      }
    }
  }
}
</script>

<style lang="scss">
@import './styles/imports';

$tooltip-content-margin: rem-calc(4px) !default;

.ui-tooltip {
  line-height: 1;
}

// The following classes are unprefixed and not BEM
// because they are generated by Tether Tooltip

.tooltip-element,
.tooltip-element:after,
.tooltip-element:before,
.tooltip-element *,
.tooltip-element *:after,
.tooltip-element *:before {
  box-sizing: border-box;
}

.tooltip-element {
  display: none;
  opacity: 0;
  position: absolute;
  transition: opacity 0.2s;
}

.tooltip-element.tooltip-open {
  display: block;
}

.tooltip-element.tooltip-after-open {
  opacity: 1;
}

.tooltip-element.ui-tooltip--theme-default {
  max-height: 100%;
  max-width: 100%;
  pointer-events: none;
  z-index: $z-index-tooltip;

  .tooltip-content {
    align-items: center;
    background: $md-grey-900;
    border-radius: $ui-default-border-radius;
    color: white;
    display: flex;
    font-family: inherit;
    font-size: rem-calc(13px);
    height: rem-calc(26px);
    line-height: 1;
    opacity: 0.9;
    padding: rem-calc(0 8px);
    position: relative;
  }

  &.tooltip-element-attached-bottom.tooltip-element-attached-center .tooltip-content {
    margin-bottom: $tooltip-content-margin;
  }

  &.tooltip-element-attached-top.tooltip-element-attached-center .tooltip-content {
    margin-top: $tooltip-content-margin;
  }

  &.tooltip-element-attached-right.tooltip-element-attached-middle .tooltip-content {
    margin-right: $tooltip-content-margin;
  }

  &.tooltip-element-attached-left.tooltip-element-attached-middle .tooltip-content {
    margin-left: $tooltip-content-margin;
  }

  &.tooltip-element-attached-top.tooltip-element-attached-left.tooltip-target-attached-bottom .tooltip-content {
    margin-top: $tooltip-content-margin;
  }

  &.tooltip-element-attached-top.tooltip-element-attached-right.tooltip-target-attached-bottom .tooltip-content {
    margin-top: $tooltip-content-margin;
  }

  &.tooltip-element-attached-bottom.tooltip-element-attached-left.tooltip-target-attached-top .tooltip-content {
    margin-bottom: $tooltip-content-margin;
  }

  &.tooltip-element-attached-bottom.tooltip-element-attached-right.tooltip-target-attached-top .tooltip-content {
    margin-bottom: $tooltip-content-margin;
  }

  &.tooltip-element-attached-top.tooltip-element-attached-right.tooltip-target-attached-left .tooltip-content {
    margin-right: $tooltip-content-margin;
  }

  &.tooltip-element-attached-top.tooltip-element-attached-left.tooltip-target-attached-right .tooltip-content {
    margin-left: $tooltip-content-margin;
  }

  &.tooltip-element-attached-bottom.tooltip-element-attached-right.tooltip-target-attached-left .tooltip-content {
    margin-right: $tooltip-content-margin;
  }

  &.tooltip-element-attached-bottom.tooltip-element-attached-left.tooltip-target-attached-right .tooltip-content {
    margin-left: $tooltip-content-margin;
  }
}
</style>
